<template>
  <div class="step">
    <div style="height:91px;position:relative;">
      <!-- 单步骤的文本框 -->
      <div :class = "textclass"
           @click="changefocus">
        <div :title = "msg">
          <!-- 单步骤左边的标号  -->
          <img v-if="isnum"
              :src="numicon"
              @mouseover="changetodel"
              class="iconstyle"/>
          <!-- 单步骤左边的修改图标 -->
          <img v-if="editflag"
               @click.stop="dialogVisible = true"
               :src="delicon"
               @mouseout="changetonum"
               class="iconstyle"/>
          <el-dialog
            title="删除或修改"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose">
            <el-input v-model="afteredit" placeholder="请输入修改后的内容"></el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="del_step">删 除</el-button>
              <el-button type="primary" @click="revise">修 改</el-button>
            </span>
          </el-dialog>
          <!-- 单步骤右边内容 -->
          <div class="msgstyle">{{msg}}</div>
        </div>
      </div>
      <!-- 单步骤的点和线，最后一步则隐藏 -->
      <div v-if="index<index_max" style="margin-left:50%">
        <div class="line"> </div>
        <div class="point" @click="add_step"></div>        
      </div>
    </div>
    <!-- 点击事件后添加的弹框 -->
  </div>
  
</template>

<script>
export default {
  name: 'step',
  data () {
    return {
      delicon:require("@/assets/system_config/edit.png"),
      editflag:0,
      isnum:1,
      dialogVisible: false,
      afteredit: ""
    }
  },
  methods: {
    revise:function(){
      this.$emit('revisedata',this.index,this.afteredit);
      this.dialogVisible = false;
    },
    changetodel:function() {
      if(this.index!=0&&this.index!=this.index_max&&this.is_edit!=0){
        this.editflag=1;
        this.isnum=0;
      }
    },
    changetonum:function() {
      this.isnum=1;
      this.editflag=0;
    },
    add_step() {
      if(this.is_edit){
        this.$prompt('请输入步骤名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          this.$emit('Addstep',this.index,value);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    },
    del_step(){
      if(this.is_edit){
        this.$emit('Delstep',this.index);
        this.dialogVisible = false;
      }
    }
    ,
    changefocus(){
      if(this.is_edit){
        this.$emit('changefocus',this.index);
      }
      else{
        if(this.index<=this.focusindex){
          this.$emit('changeview',this.index);
        }
      }
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    }
  },
  computed: {
    numicon:function(){
      var iconnum = this.index+1;
      if(this.focusindex==this.index)
        var url=require("@/assets/system_config/"+iconnum+".1.png")
      else
        var url=require("@/assets/system_config/"+iconnum+".png")
      return url
    },
    textclass:function() {
      if(!this.is_edit){
        if(this.focusindex<this.index){
          return "greystep";
        }
        if(this.viewindex==this.index){
          return "activestep";
        }
        if(this.focusindex>=this.viewindex&&this.viewindex!=this.index){
          return "noactivestep";
        }
      }
      else{
        if(this.focusindex==this.index){
          return "activestep";
        }
        else{
          return "noactivestep";
        }
      }
    }
  },
  props:["msg","index","index_max","focusindex","is_edit","viewindex"],
  watch: {
  },
  components:{
    },
    
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  .iconstyle {
    position: relative;
    cursor:pointer;
    height:26px;
    float:left;
    width:26px;
    margin-left: 5px;
    margin-top:7px;
    margin-left: 2%;
  }
  .msgstyle {
      position:relative;
      width: 70%;
      text-align: center;
      margin-left: 5%;
      color: #6a6a6a;
      /* font-size: 12px; */
      font-family: "Hiragino Sans GB";  
      float: left;
      margin-top: 7px;
      font-size: 105%;
      word-break:keep-all;           /* 不换行 */
      white-space:nowrap;          /* 不换行 */
      overflow:hidden;               /*  内容超出宽度时隐藏超出部分的内容 */
      text-overflow:ellipsis;         /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
  } 
  .point {
      cursor:pointer;
      width: 8px;
      height: 8px;
      margin-left: -3px;
      margin-top: -29px;
      background-color:rgb(20, 210, 136);
      border-radius: 9px;
      position: relative;
  }
  .line {
      width: 2px;
      height: 50px;
      background-color:rgb(20, 210, 136);
      position: relateive;
  }
  .activestep {
      cursor:pointer;
      height: 38px;//由于边框边缘大出2px height适当减小2px
      width: auto;
      border:2px solid rgb(20, 210, 136);
      border-radius:25px;
      -moz-border-radius:25px; 
      color: rgb(20, 210, 136);
  }
  .noactivestep {
      cursor:pointer;
      height: 40px;
      width: auto;
      border:1px solid grey;
      border-radius:25px;
      -moz-border-radius:25px; 
  }
  .greystep {
    cursor:pointer;
      height: 40px;
      width: auto;
      border:1px solid grey;
      border-radius:25px;
      -moz-border-radius:25px; 
      color: gray;
  }
  .step {
    width: auto;
    height: auto;
    border-radius:25px;
  }
</style>
